<template>
	<el-header class="header">
		<el-row class="logo">
			<el-col :span="14" style="text-align: left;font-size: 28px;color: #5983e8;"><b>蓝芯管理系统</b></el-col>
			<el-col :span="10" style="text-align: right;">
				<el-link type="primary" :underline="false" style="font-size: 15px;color: #fff;">admin,欢迎您！</el-link>
				<el-link type="warning" :underline="false" style="font-size: 15px;" @click="logOut()">退出系统</el-link>
			</el-col>
		</el-row>
	</el-header>
	<el-container>
		<el-aside class="aside" :style="{ width: isCollapse ? '4%' : '15%' }">
			<el-scrollbar>
				<el-menu text-color="#ffffff" router :default-active="this.$route.path" unique-opened="true"
					:collapse="isCollapse">
					<el-sub-menu index="1">
						<template #title>
							<el-icon>
								<HomeFilled />
							</el-icon>
							<span style="font-size: 18px;">首页</span>
						</template>
						<el-menu-item index="/home">
							<el-icon>
								<Location />
							</el-icon>
							<span>首页</span>
						</el-menu-item>
					</el-sub-menu>

					<el-sub-menu index="2">
						<template #title>
							<el-icon>
								<Menu />
							</el-icon>
							<span style="font-size: 18px;">学校管理</span>
						</template>
						<el-menu-item index="/classes">
							<el-icon>
								<School />
							</el-icon>
							<span>班级管理</span>
						</el-menu-item>
						<el-menu-item index="/student">
							<el-icon>
								<User />
							</el-icon>
							<span>学生管理</span>
						</el-menu-item>
					</el-sub-menu>
				</el-menu>
			</el-scrollbar>
		</el-aside>


		<el-main class="main" :style="{ width: isCollapse ? '96%' : '85%' }">
			<div class="hidemenu" @click="menuhide()">
				<img :src="icon_arrow_url" />
			</div>
			<router-view></router-view>
		</el-main>
		<el-footer class="footer">©2011-2024版权为襄阳蓝芯软件所有，如未经授权用作他处，将保留追究侵权者法律责任的权利。</el-footer>
	</el-container>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter();

let isCollapse = ref(false)

let icon_arrow_url = new URL("../assets/icon_arrow_left.png", import.meta.url).href

const menuhide = () => {
	isCollapse.value = !isCollapse.value;
	if (isCollapse.value) {
		icon_arrow_url = new URL("../assets/icon_arrow_right.png", import.meta.url).href
	} else {
		icon_arrow_url = new URL("../assets/icon_arrow_left.png", import.meta.url).href
	}

}
const logOut = () => {
	window.localStorage.removeItem('isLogin');
	localStorage.removeItem("username");
	router.push("/login");
}


</script>

<style>
.header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 5%;
	background: url(../assets/logo.png) no-repeat 0 center;
	background-image: linear-gradient(120deg, #00e4d0, #5983e8);

}

.aside {
	position: fixed;
	top: 5%;
	left: 0;
	bottom: 0;
	float: left;
	height: 93%;
	overflow: auto;
	background-image: linear-gradient(120deg, #00e4d0, #5983e8);
}

.main {
	position: absolute;
	top: 5%;
	right: 0;
	bottom: 2%;
	float: right;
	background: #fff;
	color: #000000;
}

.footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2%;
	float: right;
	background-image: linear-gradient(120deg, #00e4d0, #5983e8);
	color: #ffffff;
	font-size: 10px;
	text-align: center;
}

.logo {
	color: #ffffff;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hidemenu {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1%;
	left: 0;
	cursor: pointer;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}

/**侧边栏样式修改 */
.el-menu {
	font-weight: 800;
	border-radius: 2px;
	background-image: linear-gradient(120deg, #00e4d0, #5983e8);
}

.el-menu-item {
	border-radius: 2px !important;
	background-image: linear-gradient(120deg, #00e4d0, #5983e8);
}

.el-sub-menu:hover {
	background: #1c88cf;
}

.el-menu-item.is-active {
	font-weight: 600;
	font-size: 15px;
	color: #fff00f;
}

.el-menu-item:hover {
	font-weight: 600;
	font-size: 15px;
	background-image: linear-gradient(120deg, #00b7a5, #5983e8);
}

.el-sub-menu__title:hover {
	background: #1c88cf;
	color: #ffffff;
}
</style>